<template lang="html">
  <div class="mapSearch" id="">
    <div class="searchbox">
      <span @click="searchPoi"><img src="@/assets/images/search@2x.png" width="15"/></span>
      <input type="text" name=""
      v-model="searchKey"
      @keyup.13="searchPoi"
       placeholder="搜索"
      id="searchIpt">
    </div>

    <div class="mapArea" id="map-container">

    </div>
    <div class="searchList" id="searchList">
      <ul>
        <li v-for="items in poisList" :key="items.key"
        @click="chooseAddress(items)">
          {{items.name}}
          <p>
            {{items.pname}}
            {{items.cityname}}
            {{items.adname}}
            {{items.address}}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import AMap from 'AMap';
// 引入vue-amap
import VueAMap from 'vue-amap';
import{Toast} from 'mint-ui';
let mapParam = {
  zoom: 15,
  center: [],
  resizeEnable: true
};
var map = new AMap.Map("container", {
    resizeEnable: true
});

export default {
  name:'searchAmap',
  // props:["lng","lat","address"],
  data: ()=>({
    // lat=24.509861&lng=118.179102
    lng:'118.179102',
    lat:'24.509861',
    searchKey:'',
    markers:[],
    poisList:[],
  }),
  computed:{
    //这里的三点叫做 : 扩展运算符
    ...mapState({
      openCity:state=>state.house.openCity,
    }),
  },
  methods: {
    // 导入地图
    loadMap(centerPoi) {
      let that = this;
      const map = new AMap.Map('map-container', {
        zoom: 15,
        center: centerPoi,
        resizeEnable: true
      });
    },
    searchPoi () {
      let that = this;
      console.log(that.openCity);
      // …………………………………………………………周边分类…………………………………………………………………………………………………………
      let placeSearchOptions = { // 构造地点查询类
        pageSize: 10,
        pageIndex: 1,
        city: that.openCity.areaName, // 城市
        map: map,
         // panel: "searchList"
        // visible: false
      }
      AMap.service('AMap.PlaceSearch', function (e) {
        console.log(AMap);
      // map.clearMap() // 清除地图覆盖物
      let placeSearch = new AMap.PlaceSearch(placeSearchOptions);
      AMap.event.addListener(placeSearch, "complete", (res)=>{
        console.log(res);
        if (res.cityList) {
          Toast('多个城市，请确定具体城市名称');
        }else{
          let pois = res.poiList.pois;  //搜索结果
          that.poisList = pois;
          let centerPoi = pois[0].location;
          that.loadMap([centerPoi.lng,centerPoi.lat]);
          console.log('['+centerPoi.lng+','+centerPoi.lat+']')
          // for (let i = 0; i < pois.length; i++) {
          //   let marker = new AMap.Marker({
          //       map:map,
          //       position:[pois[i].location.lng,pois[i].location.lat],
          //   });
          //   // let marker = new AMap.Marker({
          //   //     position: [pois[i].location.lng,pois[i].location.lat],
          //   //     icon: iconImg,
          //   //     map: mapObj
          //   // });
          //   that.markers.push(marker);
          // }

        }

      });//返回地点查询结果
      placeSearch.search(that.searchKey);
      })

     },
     chooseAddress(placeLi) {
       let that = this;
       console.log(placeLi);
       this.$emit('communityMapEvent',{
         placeLi:placeLi
       });
     }
  },
  mounted() {
    let that = this;

    map.plugin('AMap.Geolocation', function() {
      let geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        // timeout: 10000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: 'RB'
      })

      geolocation.getCurrentPosition()
      AMap.event.addListener(geolocation, 'complete', onComplete)
      AMap.event.addListener(geolocation, 'error', onError)

      function onComplete (data) {
        // data是具体的定位信息
        console.log(data);
        // alert(JSON.stringify(data));
        // that.addrCon = JSON.stringify(data);
        that.lng = data.position.lng;
        that.lat = data.position.lat;
        that.loadMap([that.lng,that.lat]);
      }

      function onError (data) {
        // 定位出错
        console.log(data);
        Toast(data);
      }
    });
    that.$nextTick(()=>{
      that.loadMap([that.lng,that.lat]);
    })
  }
}
</script>

<style lang="scss" scoped>
.mapSearch{
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: white;
}
.searchbox{
	@include flex;
	border: 1px solid $borderColor;
	border-radius: 4px;
	margin: 10px;
	padding: 0 10px;
  #searchIpt{
  	@include flexcell;
    border:none;
    outline:none;
    margin-left: 10px;
    background: none;
  }
}
.mapArea{
  height: 45vh;
}
.searchList{
  height: 45vh;
  padding: 0 10px;
  overflow: scroll;
  ul li{
    padding: 4px 0;
    border-bottom: 1px solid $borderColor;
    p{
      color: $grayColor;
      font-size: 0.7rem;
    }
  }
}
#panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
</style>
